<!DOCTYPE html>
<html>
<head>
    <title>计数器</title>
</head>
<body>
    <div style="text-align: center; margin-top: 50px;">
        <button id="decrement" style="padding: 10px 20px; font-size: 18px;">-</button>
        <span id="count" style="margin: 0 20px; font-size: 24px;">0</span>
        <button id="increment" style="padding: 10px 20px; font-size: 18px;">+</button>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const countSpan = document.getElementById('count');
        const incrementBtn = document.getElementById('increment');
        const decrementBtn = document.getElementById('decrement');
        let count = 0;

        incrementBtn.addEventListener('click', () => {
            count++;
            countSpan.textContent = count;
        });

        decrementBtn.addEventListener('click', () => {
            count--;
            countSpan.textContent = count;
        });
    });
    </script>
</body>
</html>